<template>
  <HomePanel ref="target" title="人气推荐" sub-title="人气爆棚 不容错过">
    <template #right>
      <xtx-more></xtx-more>
    </template>

    <!-- <ul class="goods-list">
      <li v-for="item in hotList" :key="item.id">
        <RouterLink to="/">
          <img :src="item.picture" alt="" />
          <p class="name">{{ item.title }}</p>
          <p class="desc">{{ item.alt }}</p>
        </RouterLink>
      </li>
    </ul> -->
    <PrdList :list="hotList"></PrdList>
  </HomePanel>
</template>

<script>
import HomePanel from './HomePanel'
import { findHot } from '@/api/home'
import { ref } from 'vue'

import PrdList from './PrdList'

// 组件数据懒加载，第一次渲染时，只有进入视口才发送ajax请求（进入视口，拖动长屏页面至用户可见）
// 作用：提高页面渲染能力，减轻服务器压力
// 监听视口，使用vueuse
// 可以监听DOM，自定义组件
// import { useIntersectionObserver } from '@vueuse/core'

// 图片懒加载

import { useObserver } from '@/hooks'

export default {
  components: {
    HomePanel,
    PrdList
  },

  setup () {
    const hotList = ref([])
    const getHotList = async () => {
      const { result } = await findHot()
      // console.log(result)
      hotList.value = result
    }

    // 进入视口执行，这里不需要再写
    // onMounted(() => {
    //   getHotList()
    // })

    /*  // 判断是否进入视口
    const target = ref(null)
    // 该函数 useIntersectionObserver 会一直执行，每次进入退出都会返回值
    const { stop } = useIntersectionObserver(
      target,
      // [{ isIntersecting }]
      // 数组解构，解构时命名为null会报错，
      // 为空，为undefined就可以可以
      ([{ isIntersecting }], observerElement) => {
        // isIntersecting:组件或者元素是否进入可视区--返回true或者false
        console.log(isIntersecting)
        // targetIsVisible.value = isIntersecting

        // 解决根据视口内容的变化一直监听，一直执行函数的问题
        // 进入视口之后，发送某请求，不再执行函数
        if (isIntersecting) {
          getHotList()

          stop()// 不再监听
        }
      }
    )
    */

    // 抽成公共方法
    const { target } = useObserver(getHotList)

    return { hotList, target, stop }
  }
}
</script>

<style scoped lang='less'>
// .goods-list {
//   display: flex;
//   justify-content: space-between;
//   height: 426px;
//   li {
//     width: 306px;
//     height: 406px;
//     img {
//       width: 306px;
//       height: 306px;
//     }
//     p {
//       font-size: 22px;
//       padding-top: 12px;
//       text-align: center;
//     }
//     .desc {
//       color: #999;
//       font-size: 18px;
//     }
//   }
// }
</style>
